<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    /* // 加载外部全部资源（如图片，外联css和JavaScript等）加载完毕时触发事件
    // 为什么要学：
    //  > 1.有时候需要等页面资源全部处理完了再做一些事情
    //  > 2.老代码喜欢把script写到head中，这时候直接找DOM元素找不到
    // 事件名：load
    // 监听页面所有资源加载完毕：给window添加load事件
    // 注意：不光可以监听整个页面加载完毕，也可以针对某个资源绑定load事件
    // 等待页面所有资源加载完毕，就回去执行回调函数
    window.addEventListener('load', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        alert(666)
      })
    }) */


    // DOMContentLoad
    // 给document加
    // 区别：无需等待样式表，图片等加载完
    document.addEventListener('DOMContentLoaded', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        alert(666)
      })
    })

    // img.addEventListener('load', function () {
    //   // 有时候图片比较大，等待图片加载完毕，再去执行里面的代码
    // })
  </script>
</head>

<body>
  <button>点击</button>
</body>

</html>